import React, { useState, useEffect } from "react";
import { CenterPage, CenterBottom } from "./style";
import Map from "./charts/Map";
import { getCenterPageData } from "../../services/index";
import first from "@/assets/images/center-details-data1.png";
import two from "@/assets/images/center-details-data2.png";
import three from "@/assets/images/center-details-data3.png";
import four from "@/assets/images/center-details-data4.png";
import five from "@/assets/images/center-details-data5.png";
import six from "@/assets/images/center-details-data6.png";
import Image from 'next/image';

// 图片数组，根据索引来导入对应的图片
const images = {
    1: first,
    2: two,
    3: three,
    4: four,
    5: five,
    6: six,
};
const importImage = (imagePath) => {
    try {
        return require(`../../assets/images/${imagePath}`);
    } catch (err) {
        console.error(err);
        return null;
    }
};
export default function index() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        getCenterPageData()
            .then((response) => {
                console.log("数据请求成功", response);
                setData(response);
                setLoading(false);
            })
            .catch((err) => {
                console.error("数据请求失败", err);
                setError(err.message);
                setLoading(false);
            });
    }, []); // 空数组作为第二个参数，意味着这个 effect 只在组件挂载时运行一次

    if (loading) {
        return <div>Loading...</div>; // 在数据加载时显示加载指示器
    }

    if (error) {
        return <div>Error: {error}</div>; // 在发生错误时显示错误消息
    }
    const { detailsList, mapData } = data;
    return (
        <CenterPage>
            {/* 上方地图 */}
            <Map mapData={mapData}></Map>
            {/* 下方item */}
            <CenterBottom>
                <div className="detail-list">
                    {detailsList
                        ? detailsList.map((item, index) => {
                              return (
                                  <div className="detail-list-item" key={index}>
                                      {/* <img src={images[index + 1].src} alt={item.title} /> */}
                                      <Image
                                          src={importImage(`center-details-data${index + 1}.png`)}
                                          alt={item.title}
                                          width={80}
                                          height={80}
                                      />
                                      <div className="detail-item-text">
                                          <h3>{item.title}</h3>
                                          <span>{item.number}</span>
                                          <span className="unit">{item.unit}</span>
                                      </div>
                                  </div>
                              );
                          })
                        : ""}
                </div>
            </CenterBottom>
        </CenterPage>
    );
}
